<template>
	<v-layout type="main">
		<div class="alike-lis-header">
			<div class="lis-header-left">
				<div class="add-btn" @click="$router.push({ path: '/image/detail' })">+ 新增</div>

				<div class="search-box">
					<el-input
						prefix-icon="el-icon-search"
						v-model="Pagedata.name"
						class="search"
						placeholder=""
						@input="searchChange"
					/>
				</div>
			</div>

			<div class="lis-header-right">
				<el-select size="mini" placeholder="请选择" v-model="showThisActive" @change="getData">
					<el-option label="私有的" value="0"></el-option>
					<el-option label="共享的" value="1"></el-option>
				</el-select>
			</div>
		</div>

		<el-table :data="tableData">
			<el-table-column prop="name" label="名称">
				<template slot-scope="{ row }">
					<el-button type="text" @click="$router.push({ path: '/image/code', query: { id: row.id } })">{{
						row.name
					}}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="创建人" />
			<el-table-column prop="update_time" label="更新时间" />
			<el-table-column prop="engine" label="框架" />
			<el-table-column prop="type" label="类型" />
			<el-table-column label="操作">
				<template slot-scope="{ row }">
					<!-- <el-button type="text" @click="del(row)">删除</el-button> -->
					<el-popover placement="top" width="80" trigger="click" v-model="row.visible">
						<p>您确定要删除吗？</p>
						<div style="text-align: right; margin: 0">
							<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
							<el-button type="primary" size="mini" @click="del(row)">确定</el-button>
						</div>
						<el-button type="text" slot="reference">删除</el-button>
						<!-- <el-button slot="reference" type="danger" size="mini">删除</el-button> -->
						<!-- <i slot="reference" class="el-icon-delete delete-btn" /> -->
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
			<el-pagination
				background
				class="pagination"
				layout="total, prev, pager, next, jumper"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>
	</v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getImages, delImage } from "@/api/image";
export default {
	data() {
		return {
			showThisActive: "0",
			tableData: [],
			Pagedata: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				name: "",
			},
		};
	},
	async created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
		this.getData();
	},
	computed: mapState({
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	methods: {
		...mapActions(["updatePageNum", "updateSearch"]),
		async getData() {
			let res = await getImages({ visibility: this.showThisActive, ...this.Pagedata });
			this.tableData = res.data.list;
			this.Pagedata.total = res.data.total;
		},
		searchChange() {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.updateSearch(this.Pagedata.name);
			this.getData();
		},
		put({ id }) {
			this.$router.push({
				path: "/image/detail",
				query: { id },
			});
		},
		async del(row) {
			// let res = await this.$isDel();
			// if (res) {
			await delImage(row);
			this.getData();
			// }
		},
		handleCurrentChange(val) {
			this.Pagedata.current = val;
			this.updatePageNum(val);
			this.getData();
		},
	},
};
</script>
<style lang="less" scoped></style>
